<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PyUIBuilder - A  Drag and Drop builder for python GUIs</title>
        <meta name="description" content="A Drag and Drop builder for Python GUIs, including Tkinter, Custom Tkinter and more" />
        <link
            rel="shortcut icon"
            href="./assets/logo/logo.png"
            type="image/x-icon"
        />

        <!-- Open Graph / Facebook -->
        <meta property="og:title" content="PyUIBuilder - A Drag and Drop builder for python GUIs" />
        <meta property="og:description" content="A Drag and Drop builder for Python GUIs, including Tkinter, Custom Tkinter and more" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://about.pyuibuilder.com" />
        <!--Replace with the current website url-->
        <meta property="og:image" content="" />

        <!-- <link rel="stylesheet" href="../tailwind/tailwind-runtime.css" /> -->
        <link rel="stylesheet" href="./css/tailwind-build.css">
        <link rel="stylesheet" href="css/index.css" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
            integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />

        <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-');
        </script>
    </head>
    <body
        class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-white tw-text-black"
    >
        <header
            class="tw-max-w-lg:tw-px-4 tw-max-w-lg:tw-mr-auto tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[60px] tw-w-full tw-bg-opacity-0 tw-px-[5%] lg:tw-justify-around"
        >
            <a class="tw-h-[50px] tw-w-[50px] tw-p-[4px]" href="">
                <img
                    src="./assets/logo/logo.png"
                    alt="logo"
                    class="tw-object tw-h-full tw-w-full"
                />
            </a>
            <div
                class="collapsible-header animated-collapse max-lg:tw-shadow-md"
                id="collapsed-header-items"
            >
                <div
                    class="tw-flex tw-h-full tw-w-max tw-gap-5 tw-text-base
                            max-lg:tw-mt-[30px] max-lg:tw-flex-col max-lg:tw-place-items-end 
                            max-lg:tw-gap-5 lg:tw-mx-auto lg:tw-place-items-center"
                >
                    <a class="header-links" href=""> About </a>
                    <a class="header-links" href="#pricing"> Pricing </a>
                    <a class="header-links" href="#features"> Features </a>
                    <a class="header-links" target="_blank" rel="noopener noreferrer" href="https://docs.pyuibuilder.com"> Docs </a>
                    <a class="header-links" target="_blank" rel="noopener noreferrer" href="https://github.com/PaulleDemon/PyUIBuilder"> Github </a>
                </div>
                <div
                    class="tw-mx-4 tw-flex tw-place-items-center tw-gap-[20px] tw-text-base max-md:tw-w-full max-md:tw-flex-col max-md:tw-place-content-center"
                >
                    <a
                        href="https://pyuibuilder.com"
                        aria-label="start"
                        target="_blank"
                        rel="noreferrer noopener"
                        class="tw-rounded-md tw-border-[1px] tw-border-black 
                                tw-bg-[#0F1727] tw-px-3 tw-py-2 tw-text-white 
                                tw-duration-[0.3s]
                                tw-transition-all hover:tw-translate-x-2
                                "
                    >
                        <span>Start free</span>
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
            <button
                class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-3xl tw-text-white lg:tw-hidden"
                onclick="toggleHeader()"
                aria-label="menu"
                id="collapse-btn"
            ></button>
        </header>

        <section
            class="hero-section tw-relative tw-flex tw-min-h-[80vh] tw-w-full tw-max-w-[100vw] tw-flex-col 
                    tw-overflow-hidden max-md:tw-mt-[50px] tw-place-content-center tw-place-items-center"
            id="hero-section"
        >   

            <!-- video container -->
            <div class="tw-fixed tw-bg-[#fdfdfdaf] dark:tw-bg-[#80808085] tw-top-0 tw-left-1/2 tw--translate-x-1/2 tw-z-20 tw-transition-opacity
                tw-duration-300 tw-scale-0 tw-opacity-0 tw-p-2
                tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center" id="video-container-bg">

                <div class="tw-max-w-[80vw] max-lg:tw-max-w-full max-lg:tw-w-full tw-scale-0 tw-transition-transform tw-duration-500 tw-p-6 tw-rounded-xl  max-lg:tw-px-2 tw-w-full tw-gap-2 tw-shadow-md 
                            tw-h-[90vh] max-lg:tw-h-auto max-lg:tw-min-h-[400px] tw-bg-white dark:tw-bg-[#16171A] tw-max-h-full
                            " id="video-container">
                    <div class="tw-w-full tw-flex">
                        <button type="button" onclick="closeVideo()" class="tw-ml-auto tw-text-xl" title="close">
                            <i class="bi bi-x-circle-fill"></i>
                        </button>
                    </div>
                    <div class="tw-flex tw-w-full  tw-rounded-xl tw-px-[5%] max-md:tw-px-2 tw-min-h-[300px] tw-max-h-[90%] tw-h-full">

                        <div class="tw-relative tw-bg-black tw-min-w-full tw-min-h-full tw-overflow-clip tw-rounded-md">
                            <!-- add your youtube video link here -->
                            <iframe class="tw-absolute tw-top-[50%] tw--translate-y-[50%] tw-left-[50%] tw--translate-x-[50%] tw-w-full tw-h-full" src="https://www.youtube.com/embed/CjwkUoGDX2g?si=gGG8Bs0Qc_J8ZF3a&amp;controls=1&rel=1&showinfo=0&autoplay=0&loop=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
        
                    </div>
                </div>  
            </div>

            <div
                class="tw-flex tw-h-full max-lg:tw-mt-10 max-lg:tw-min-h-[80vh] tw-min-h-[70vh] tw-w-full tw-flex-col tw-place-content-center tw-gap-6 tw-p-[5%] max-xl:tw-place-items-center max-lg:tw-p-4"
            >
                <div
                    class="tw-flex tw-flex-col tw-place-content-center tw-items-center"
                >
                    <div
                        class="tw-text-center tw-text-6xl tw-font-semibold tw-uppercase tw-leading-[90px] 
                                max-lg:tw-text-4xl tw-text-[#0F1727]
                                max-md:tw-leading-snug"
                    >
                        <span class=""> Build Python UI's using <span class="tw-px-3"></span>
                           </span>
                        <br />
                        <span class=" tw-px-3 tw-text-5xl"> Drag and Drop editor </span>
                    </div>
                    
                </div>

                <div class="tw-flex tw-flex-col tw-w-full tw-place-items-center tw-place-content-center">
                    <div
                        class="reveal-up tw-mt-3 tw-max-w-[450px] tw-p-2 tw-text-center tw-text-gray-700 max-lg:tw-max-w-full"
                    >
                       The most awaited python tool is here. Now you can use Drag and drop to build Tkinter and customTk GUIs. Soon wil be made available for kivy and PySide 
                    </div>

                    <div
                        class="reveal-up tw-mt-10 tw-flex tw-place-items-center tw-gap-4"
                    >
                        <a
                            class="btn !tw-bg-[#0F1727] !tw-text-white tw-shadow-lg tw-shadow-[#4d395e] tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03]"
                            target="_blank"
                            rel="noopener noreferrer"
                            href="https://pyuibuilder.com"
                        >
                            Start for free
                        </a>
                        <button
                            class="btn tw-flex tw-gap-2 !tw-border-solid !tw-border-[1px] !tw-border-[#0F1727] !tw-text-[#0F1727] !tw-bg-transparent tw-transition-colors tw-duration-[0.3s] hover:!tw-bg-white hover:!tw-text-black"
                            onclick="openVideo()"
                            
                        >
                            <i class="bi bi-play-circle-fill"></i>
                            <span>Watch video</span>
                        </button>
                    </div>
                </div>
            </div>


        </section>


        <section
            class="tw-relative tw-flex tw-w-full tw-min-h-[50vh] tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden tw-p-8"
        >
            
            <div class="reveal-up tw-flex tw-border-[1px] max-lg:tw-w-full tw-border-black tw-rounded-md tw-p-2 tw-max-w-[850px] tw-w-[1000px] tw-min-h-[550px] max-lg:tw-min-w-[320px] max-lg:tw-min-h-[250px] max-lg:tw-h-auto">

                <div class="tw-relative tw-bg-black tw-min-w-full tw-min-h-full tw-overflow-clip tw-rounded-md">
                    <!-- <iframe class="tw-absolute tw-top-[50%] tw--translate-y-[50%] tw-left-[50%] tw--translate-x-[50%] tw-w-full tw-h-full" src="https://www.youtube.com/embed/aXq0A6iJoKU?si=dF3UZT2eTRDU8u7a?si=QOMSCki8Jl30_CkW&amp;controls=1&rel=0&showinfo=0&autoplay=1&loop=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> -->
                    <img class="tw-object-contain tw-w-full tw-h-full" 
                        alt="Pyui gif" src="./assets/images/home/promo.gif" >
                </div>

            </div>
        </section>

        <section
            class="tw-relative tw-flex tw-w-full tw-min-h-[100vh] tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden tw-p-8"
            id="features"
            >
            
            <h2 class="tw-text-5xl tw-text-center tw-font-medium tw-uppercase">
                Everything you need <br>
                to perfect Python GUIs
            </h2>
            <div
                class="tw-flex tw-flex-col tw-max-w-[1150px] max-lg:tw-max-w-full tw-h-full 
                        tw-p-4 tw-mt-4 max-lg:tw-place-content-center tw-gap-8"
            >   

                <div class="max-xl:tw-flex max-xl:tw-flex-col tw-place-items-center tw-grid tw-grid-cols-3 tw-gap-8 
                            tw-place-content-center tw-auto-rows-auto">

                    <div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
                        <div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                            tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl 
                            hover:tw-scale-[1.02]">
                            <div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
                                <img src="./assets/images/home/benefits/1.png" 
                                    alt="Drag and drop" class="tw-w-full tw-h-full tw-object-contain">
                                <!-- <i class="bi bi-grid-1x2-fill"></i> -->
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Drag and Drop editor</h2>
                            <p class="tw-leading-normal tw-text-gray-800 tw-overflow-clip">
                                Easily drag and drop desired widgets from sidebar and create beautiful Python GUI's 
                            </p>
                            
                        </div>
                    </div>
                    <div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
                        <div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                            tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl 
                            hover:tw-scale-[1.02]">
                            <div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
                                <img src="./assets/images/home/benefits/2.png" 
                                    alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
                                <!-- <i class="bi bi-grid-1x2-fill"></i> -->
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Support for multiple UI libraries</h2>
                            <p class="tw-leading-normal tw-text-gray-800 tw-overflow-clip">
                                We currently support multiple UI libraries such as Tkinter, CustomTk and soon will offer support for PySide and 
                                kivy.
                            </p>
                            
                        </div>
                    </div>
                    <div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
                        <div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                            tw-flex-col tw-w-full tw-h-full tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl 
                            hover:tw-scale-[1.02]">
                            <div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
                                <img src="./assets/images/home/benefits/3.png" 
                                    alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
                                <!-- <i class="bi bi-grid-1x2-fill"></i> -->
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Supports many UI Widgets</h2>
                            <p class="tw-leading-normal tw-text-gray-800 tw-overflow-clip">
                                Our editor includes pre-defined widgets like Buttons and Labels, compatible with Pack/Flex, Grid, and absolute layouts.
                            </p>
                            
                        </div>
                    </div>

                    <div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
                        <div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                            tw-flex-col tw-w-full tw-h-full  tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl 
                            hover:tw-scale-[1.02]">
                            <div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
                                <img src="./assets/images/home/benefits/4.png" 
                                    alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
                                <!-- <i class="bi bi-grid-1x2-fill"></i> -->
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Generate clean Python code</h2>
                            <p class="tw-leading-normal tw-text-gray-800">
                                Our editor doesn't just let you drag and drop, but also lets you generate clean pyhon code in 
                                library of your choice
                            </p>
                            
                        </div>
                    </div>
                    <div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
                        <div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                            tw-flex-col tw-w-full tw-h-full  tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl 
                            hover:tw-scale-[1.02]">
                            <div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
                                <img src="./assets/images/home/benefits/5.png" 
                                    alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
                                <!-- <i class="bi bi-grid-1x2-fill"></i> -->
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">3rd Party Plugin support</h2>
                            <p class="tw-leading-normal tw-text-gray-800">
                                We support your favorite 3rd party widgets such as video player, Map viewer and more. 
                            </p>
                            
                        </div>
                    </div>
                    <div class="tw-w-[350px] tw-h-[500px] max-lg:tw-h-fit tw-flex max-md:tw-w-full">
                        <div href="#" class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                            tw-flex-col tw-w-full tw-h-full  tw-bg-[#f2f2f2] tw-border-2 tw-border-white tw-rounded-3xl 
                            hover:tw-scale-[1.02]">
                            <div class="tw-w-full tw-min-h-[200px] tw-h-[200px] tw-overflow-hidden">
                                <img src="./assets/images/home/benefits/6.png" 
                                    alt="live preview" class="tw-w-full tw-h-full tw-object-contain">
                                <!-- <i class="bi bi-grid-1x2-fill"></i> -->
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-medium tw-uppercase">Supports asset upload</h2>
                            <p class="tw-leading-normal tw-text-gray-800">
                                Adding images and logos is important while developing GUIs so we support asset uploads. 
                                The best part is nothing is sent to server.
                            </p>
                            
                        </div>
                    </div>

                </div>
       

            </div>

            <a
                class="tw-mt-6 btn tw-my-6 tw-flex tw-gap-1 tw-bg-[#0F1727]
                        tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03] tw-group"
                href="#pricing"
            >
                Make it yours
                <i class="bi bi-arrow-right tw-transition-transform group-hover:tw-translate-x-1 tw-duration-300"></i>
            </a>
        </section>

        <section class="tw-mt-1 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[2%] max-lg:tw-p-2" id="pricing">
            <h3 class="tw-text-2xl tw-font-medium max-md:tw-text-2xl">Pre-order your License</h3>
            
            <div class="tw-max-w-[650px] tw-my-2">
                Pre-orders for PyUiBuilder premium features are open. Premium features will start rolling out 
                from end of April phase wise. This is your last chance to get it before price increase from end of April.
            </div>
            <div class="tw-mt-10 tw-flex tw-place-content-center tw-gap-8 max-lg:tw-flex-col">
                <div class="tw-flex tw-w-[380px] tw-border-[1px] tw-border-gray-300 tw-border-solid tw-flex-col 
                                tw-place-items-center tw-gap-2 tw-rounded-lg tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
                    <h3>
                        <span class="tw-text-5xl tw-font-semibold">$0</span>
                    </h3>
                    <p class="tw-mt-3 tw-text-base tw-text-center tw-text-gray-800">
                        Free to use forever, but for added features and to support development, consider buying a lifetime license.
                    </p>
                    <hr />
                    <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Access to web-based editor</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Commercial use</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Downloadable UI builder exe for local development</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Event handlers and code editor</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Support for PySlide/PyQt</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Preview live</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Save and load files</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Load plugins locally</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Load local UI templates</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Dark theme</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Priority support</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Early access to new features</span>
                        </li>
                        
                    </ul>
                    <a
                        href="https://pyuibuilder.com"
                        target="_blank"
                        rel="noreferrer noopener"
                        class=" !tw-bg-[#0F1727] tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.01] !tw-mt-auto !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
                    >
                        <span>Get Started</span>
                        <!-- <CrownFilled /> -->
                    </a>
                </div>

                <div class="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2 tw-border-solid
                                  tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
                    <div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
                        Limited time offer
                    </div>
                    <div class="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
                        Hobby
                    </div>
                    <h3>
                        <span class="tw-text-5xl tw-font-semibold">
                            <s class="tw-font-medium tw-text-4xl">$129</s>
                            <span>$29</span>
                        </span>
                        <span class="tw-text-2xl tw-text-gray-600">Forever</span>
                    </h3>
                    <p class="tw-mt-3 tw-text-center tw-text-gray-600">
                        Best for hobby users and people who want to learn basic UI development without PySide
                    </p>
                    <hr />
                    <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Access to web-based editor</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Downloadable UI builder exe for local development</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi  bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Event handlers and code editor</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Preview live</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Save and load files</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Load plugins locally</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Load local UI templates</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Dark theme</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Priority support</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Early access to new features</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Support for PySlide/PyQt</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                            <span>Commercial use</span>
                        </li>
                        
                    </ul>

                    <a
                        href="https://ko-fi.com/s/4a3dffb3b9"
                        target="_blank"
                        rel="noreferrer noopener"
                        class="tw-mt-8 tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.01] !tw-bg-[#0F1727] !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
                    >
                        <span>Buy License</span>
                        <!-- <CrownFilled /> -->
                    </a>
                </div>

                <div class="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-[3px] tw-border-solid
                                 !tw-border-blue-600 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
                    <div class="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
                        Limited time offer
                    </div>
                    <div class="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
                        Commercial
                    </div>
                    <h3>
                        <span class="tw-text-5xl tw-font-semibold">
                            <s class="tw-font-medium tw-text-4xl">$180</s>
                            <span>$49</span>
                        </span>
                        <span class="tw-text-2xl tw-text-gray-600">Forever</span>
                    </h3>
                    <p class="tw-mt-3 tw-text-center tw-text-gray-600">
                        Best for startups and teams and people who want to use internally or serves a commercial purpose and want support for PySide
                    </p>
                    <hr />
                    <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Access to web-based editor</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Downloadable UI builder exe for local development</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Premium widgets <small class="tw-text-sm">(eg: scroll widget, tab widget, Canvas etc)</small></span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi  bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Event handlers and code editor</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Preview live</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Save and load files</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Load plugins locally</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-x-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Load local UI templates</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Dark theme</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Priority support</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Early access to new features</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Support for PySlide/PyQt</span>
                        </li>
                        <li class="tw-flex tw-place-items-center tw-gap-2">
                            <i class="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                            <span>Commercial use</span>
                        </li>
                        
                    </ul>

                    <a
                        href="https://ko-fi.com/s/560a3b6b05"
                        target="_blank"
                        rel="noreferrer noopener"
                        class="tw-mt-8 !tw-bg-[#0F1727] tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.02] !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md
                                     tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
                    >
                        <span>Buy License</span>
                        <!-- <i class="bi bi-crown"></i> -->
                    </a>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-p-[5%] tw-px-[10%]"
        >
            <h3
                class="tw-text-4xl tw-font-medium tw-text-gray-800 max-md:tw-text-2xl"
            >
                Faq
            </h3>
            <div
                class="tw-mt-5 tw-flex tw-min-h-[300px] tw-w-full tw-max-w-[850px] tw-flex-col tw-gap-4"
            >
                <div
                    class="faq tw-w-full"
                >
                    <div
                        class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
                    >
                        <span>Is the source code available?</span>
                        <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
                    </div>
                    <div class="content">
                        Yes, source code is available at 
                        <a  target="_blank"
                            rel="noopener noreferrer"
                            href="https://github.com/PaulleDemon/PyUIBuilder" 
                            class="tw-underline">Github</a>
                    </div>
                </div>

                <div
                    class="faq tw-w-full"
                >
                    <div
                        class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
                    >
                        <span>Can I try the PyUIBuilder for free?</span>
                        <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
                    </div>
                    <div class="content">
                        Yes, PyUIBuilder is free to use forever, however to support 
                        development, some features are only available to premium users.
                    </div>
                </div>

                <div
                    class="faq tw-w-full"
                >
                    <div
                        class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
                    >
                        <span>How can I save and load UI files?</span>
                        <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
                    </div>
                    <div class="content">
                        Saving and loading UI Files will be made available to premium users, when it becomes available. 
                        If you hold a premium license you'll be notified of the release.
                    </div>
                </div>

                <div
                    class="faq tw-w-full"
                >
                    <div
                        class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
                    >
                        <span>When will premium features roll out</span>
                        <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
                    </div>
                    <div class="content">
                        Premium features will start rolling out towards the end of April in phase wise.
                    </div>
                </div>
                <div
                    class="faq tw-w-full"
                >
                    <div
                        class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
                    >
                        <span>Can I get a free license?</span>
                        <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
                    </div>
                    <div class="content">
                        Yes, we have a program by which you can get a free license, <a href="https://tally.so/r/mJM22X" class="tw-underline tw-underline-offset-1">read more</a>
                    </div>
                </div>
            </div>

            <div class="tw-flex tw-flex-col tw-gap-2 tw-place-items-center tw-mt-4">
                <div class="tw-text-2xl">Want more help?</div>
                <a class="btn hover:tw-scale-[1.02] tw-duration-75" target="_blank" rel="noopener noreferrer" 
                    href="https://discord.gg/dHXjrrCA7G">Discord invite</a>
            </div>

        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[5%] tw-p-[3%] tw-px-[10%]"
            id="blog-section"
            >
            <h3 class="tw-text-4xl tw-font-medium tw-text-gray-800 max-md:tw-text-2xl">Blogs & Tutorials</h3>
            <div class="tw-mt-5 tw-flex tw-gap-8 tw-place-items-center max-lg:tw-flex-col 
                        tw-place-content-center tw-min-h-[300px] tw-w-full">
                <div class="tw-flex tw-gap-4" id="blogs">
                    
                    
                
                </div>
                <a href="https://youtu.be/MkeMv0X-w_4?si=qeutS58Js7Padd9m&t=49" target="_blank" rel="noopener noreferrer" 
                    class="tw-w-[350px] tw-min-w-[350px] tw-max-w-[350px] max-lg:tw-w-full tw-h-[360px]  tw-shadow-xl tw-rounded-md tw-overflow-hidden">
                    <div class="tw-h-[230px] tw-w-full tw-bg-gray-800 tw-flex tw-place-content-center">
                        <img src="https://img.youtube.com/vi/MkeMv0X-w_4/hqdefault.jpg" 
                                alt="" class="tw-object-contain tw-w-full">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-2 tw-p-3">
                        <h3 class="tw-text-lg tw-font-medium">Introduction to PyUiBuilder - YouTube</h3>
                        <p class="tw-text-bg-gray-500">Introduction to PyUIBuilder</p>
                    </div>
                </a>
                <a href="https://youtu.be/4w3Oy17FE8U?si=-0V0cD5DQAEzCkKm" target="_blank" rel="noopener noreferrer" 
                    class="tw-w-[350px] tw-min-w-[350px] tw-max-w-[350px] max-lg:tw-w-full tw-h-[360px]  tw-shadow-xl tw-rounded-md tw-overflow-hidden">
                    <div class="tw-h-[230px] tw-w-full tw-bg-gray-800 tw-flex tw-place-content-center">
                        <img src="https://img.youtube.com/vi/4w3Oy17FE8U/hqdefault.jpg" 
                                alt="" class="tw-object-contain tw-w-full">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-2 tw-p-3">
                        <h3 class="tw-text-lg tw-font-medium">Create Signup form using PyUIBuilder  - YouTube</h3>
                        <p class="tw-text-bg-gray-500">Learn how to use this tool, via practical example</p>
                    </div>
                </a>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-2 tw-p-[3%] tw-px-[10%]"
        >
            <h3 class="tw-text-xl">Get updates right in your mailbox</h3>

            <button class="btn hover:tw-scale-[1.05] tw-duration-75" data-tally-open="mVDY7N" data-tally-layout="modal" data-tally-hide-title="1" data-tally-emoji-text="👋" data-tally-emoji-animation="wave" data-tally-auto-close="0">
                Get updates
            </button>
        </section>

        <footer
            class="tw-mt-auto tw-flex tw-w-full tw-place-content-around tw-gap-3 tw-p-[5%] tw-px-[10%] tw-text-black max-md:tw-flex-col"
        >
            <div
                class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-place-items-center tw-gap-6 max-md:tw-w-full"
            >
                <img
                    src="./assets/logo/logo.png"
                    alt="logo"
                    srcset=""
                    class="tw-max-w-[120px]"
                />
              
                <div class="tw-mt-3 tw-text-lg tw-font-semibold">Follow</div>
                <div class="tw-flex tw-gap-4 tw-text-2xl">
                    <a href="https://www.youtube.com/@paultalkstech" 
                        target="_blank"
                        rel="noreferrer noopener"
                        aria-label="Youtube">
                        <i class="bi bi-youtube"></i>
                    </a>
                    <a
                        href="https://twitter.com/@pauls_freeman"
                        target="_blank"
                        rel="noreferrer noopener"
                        aria-label="Twitter"
                    >
                        <i class="bi bi-twitter"></i>
                    </a>
                    <a
                        href="https://github.com/PaulleDemon"
                        target="_blank"
                        rel="noreferrer noopener"
                        class="tw-h-[40px] tw-w-[40px]"
                        aria-label="Github"
                    >
                        <i class="bi bi-github"></i>
                    </a>
                </div>
            </div>

            <div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4">
                <!-- <h2 class="tw-text-3xl max-md:tw-text-xl">Company</h2> -->
                <div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                    <a href="#features" class="footer-link">Features</a>
                    <a href="#pricing" class="footer-link">Pricing</a>
                    <a href="https://github.com/PaulleDemon/PyUIBuilder/blob/main/roadmap.md" class="footer-link">Roadmap</a>
                    <a href="./privacy.html" class="footer-link">Privacy</a>
                </div>
            </div>

            <div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4">
                <div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                    <a href="" class="footer-link">About</a>
                    <a href="#faq" class="footer-link">FAQ</a>
                    <a href="https://github.com/PaulleDemon/PyUIBuilder" class="footer-link">Github</a>
                    <a href="https://github.com/PaulleDemon/PyUIBuilder/issues" class="footer-link">Report issue</a>
                    <a href="https://discord.gg/dHXjrrCA7G" class="footer-link">Discord invite</a>
                </div>
            </div>
        </footer>
    </body>
    <script async src="https://tally.so/widgets/embed.js"></script>
    <script>

        const blogsList = [
            {
            "title": "How to create Signup form - Blog",
            "description": "If your starting out with tkinter, it can be overwhelming without prior understanding of GUIs....",
            "url": "https://medium.com/python-in-plain-english/create-tkinter-guis-using-tkinter-gui-builder-pyuibuilder-a7422489c55e",
            "image_url": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*BaSis1UO3_zJeQtCnOe3Qg.png"
            },
          ]	
    
        const blogContainer = document.getElementById('blogs');
        blogContainer.innerHTML = blogsList.map(blog => {
                return (`
                    <a href="${blog.url}" target="_blank" rel="noopener noreferrer" 
                        class="tw-w-[350px] tw-h-[360px] tw-shadow-xl tw-rounded-md tw-overflow-hidden">
                        
                        <div class="tw-h-[230px] tw-w-full tw-bg-gray-800 tw-flex tw-place-content-center">
                            <img src="${blog.image_url}" alt="${blog.title}" class="tw-object-contain tw-w-full">
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-2 tw-p-3">
                            <h3 class="tw-text-lg tw-font-medium">${blog.title}</h3>
                            <p class="tw-text-bg-gray-500">${blog.description}</p>
                        </div>
                    </a>
                `)
            }).join('')
      
    </script>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"
        integrity="sha512-B1lby8cGcAUU3GR+Fd809/ZxgHbfwJMp0jLTVfHiArTuUt++VqSlJpaJvhNtRf3NERaxDNmmxkdx2o+aHd4bvw=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js"
        integrity="sha512-AY2+JxnBETJ0wcXnLPCcZJIJx0eimyhz3OJ55k2Jx4RtYC+XdIi2VtJQ+tP3BaTst4otlGG1TtPJ9fKrAUnRdQ=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" integrity="sha512-Ysw1DcK1P+uYLqprEAzNQJP+J4hTx4t/3X2nbVwszao8wD+9afLjBQYjz7Uk4ADP+Er++mJoScI42ueGtQOzEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" integrity="sha512-rd0qOHVMOcez6pLWPVFIv7EfSdGKLt+eafXh4RO/12Fgr41hDQxfGvoi1Vy55QIVcQEujUE1LQrATCLl2Fs+ag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="./widget/content.js"></script>

    <script src="./scripts/utils.js"></script>
    <script src="./index.js"></script>

    <style>
        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            text-align: center;
            /* font-size: 12px; */
            opacity: 1;
            background: #dad8d8fa;
            left: auto;
        }
        .swiper-pagination-bullet:hover {
            color: #000;
            opacity: 1;
            background: #ede0e0bd;
        }

        .swiper-pagination-bullet-active {
            background: #000000 !important;
        }

        .swiper {
            padding: 10px !important;
        }
    </style>


</html>
